<template>
	<div>
		 <ButtonGroup>
	        <Button @click="changeType(1)" :class="{active: formValidate.type ===1 }">新闻分类</Button>
	        <Button @click="changeType(2)" :class="{active: formValidate.type ===2 }">上传分类</Button>
	        <Button @click="changeType(3)" :class="{active: formValidate.type ===3 }">产品分类</Button>
	    </ButtonGroup>
		<Tree :data="baseData" show-checkbox @on-select-change="getCataid"></Tree>
		
		<Button type="primary" @click="addDatas">添加用户</Button>
		<Button @click="handleSelectAll(true)">设置全选</Button>
        <Button @click="handleSelectAll(false)">取消全选</Button>
        <Button @click="removeSelectAll">多选删除</Button>
		<Input v-model="filter.name">
	       
	        <Button slot="append" icon="ios-search" @click="search"></Button>
	   </Input>		
		<Table width="950" border :columns="columns2" :data="list"></Table>
		<Page :total="filter.total" show-elevator show-total size="small" :page-size="2" show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
		<Modal
	        v-model="modal2"
	        title="普通的Modal对话框标题"
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <Form ref="formValidates" :model="formValidates" :rules="ruleValidates" :label-width="80">
		        <FormItem label="姓名" prop="name">
		            <Input v-model="formValidates.name" placeholder="请输入姓名"></Input>
		        </FormItem>
		        
		        <FormItem label="选择日期">
		            <Row>
		                <Col span="11">
		                    <FormItem prop="date">
		                        <DatePicker type="date" placeholder="选择日期" v-model="formValidates.date"></DatePicker>
		                    </FormItem>
		                </Col>
		                <Col span="2" style="text-align: center">-</Col>
		            </Row>
		        </FormItem>
		        <!--<FormItem label="评分" prop="rate">
		        	<Col span="12">
			            <Rate show-text allow-half v-model="valueCustomText">
			                <span style="color: #f5a623">{{ valueCustomText }}</span>
			            </Rate>
			        </Col>		           
		        </FormItem>-->
		        <FormItem label="评论" prop="desc">
		            <Input v-model="formValidates.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
		        </FormItem>
		        <FormItem>
		            <Button type="primary" @click="handleSubmits('formValidates')">提交</Button>
		            <Button type="ghost" @click="handleReset('formValidates')" style="margin-left: 8px">重置</Button>
		        </FormItem>
		    </Form>
	   </Modal>
		<Modal
	        v-model="modal1"
	        title="普通的Modal对话框标题"
	        @on-ok="ok"
	        @on-cancel="cancel">
	        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
		        <FormItem label="标题" prop="title">
		            <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
		        </FormItem>
		        <FormItem label="副标题" prop="subhead">
		            <Input v-model="formValidate.subhead" placeholder="请输入副标题"></Input>
		        </FormItem>
		        <FormItem label="内容" prop="content">
		            <Input v-model="formValidate.content" placeholder="请输入内容"></Input>
		        </FormItem>
		        <FormItem label="作者" prop="author">
		            <Input v-model="formValidate.author" placeholder="请输入内容"></Input>
		        </FormItem>
		        <FormItem label="选择日期">
		            <Row>
		                <Col span="11">
		                    <FormItem prop="date">
		                        <DatePicker type="date" placeholder="选择日期" v-model="formValidate.date"></DatePicker>
		                    </FormItem>
		                </Col>
		                <Col span="2" style="text-align: center">-</Col>
		                
		            </Row>
		        </FormItem>
		        <FormItem>
		            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
		            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
		        </FormItem>
		    </Form>
	   </Modal>
	</div>
    
</template>
<script>
	import Mark from '../../common/Mark.js';
	import Base from '../../common/Base.js';
	
    export default {
    	
    	mixins:[Mark,Base],
    	
		data(){
			return{
				module2:'cata',
				module1:'news',
				modal2:false,
				idsa:'',
				columns1: [
				  	{
	                    type: 'selection',
	                    width: 60,
	                    align: 'center',
	                },
	                {
	                    title: '姓名',
	                    key: 'name'
	                },
	                 {
	                    title: '评论内容',
	                    key: 'content'
	                },
	                 {
	                    title: '时间',
	                    key: 'date'
	                },
	                
	                {
	                    title: '操作',
	                    key: 'action',
	                    fixed: 'right',
	                    width: 120,
	                    render: (h, params) => {
	                        return h('div', [
	                            h('Button', {
	                                props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
	                                on: {
	                                    click: () => {
	                                       this.show(params.row._id)
	                                    }
	                                }
	                            }, '查看'),
	                            h('Button', {
	                                props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
	                                on: {
	                                    click: () => {
	                                        this.editData(params.row._id)
	                                    }
	                                }
	                            }, '编辑'),
	                            h('Button', {
	                                props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
	                                on: {
	                                    click: () => {
	                                        this.removeData(params.row._id);
	                                    }
	                                }
	                            }, '删除'),
	                            h('Button', {
	                                props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
	                                on: {
	                                    click: () => {
	//                                          this.editData(params.row._id)
	                                    }
	                                }
	                            }, '添加')  
	                        ]);
	                    }
	                }
	            ],
				 columns2: [
                    {
                        title: '标题',
                        key: 'title',
                        width: 100,
                        fixed: 'left'
                    },
                    {
                        title: '副标题',
                        key: 'subhead',
                        width: 100
                    },
                    {
                        title: '内容',
                        key: 'content',
                        width: 100
                    },
                    {
                        title: '作者',
                        key: 'author',
                        width: 100
                    },
                    {
                        title: '时间',
                        key: 'date',
                        width: 200
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
	                                    click: () => {
											this.$router.push({path:'/comment/'+params.row._id});
	                                    }
	                                }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                     on: {
	                                    click: () => {
	                                        this.editData(params.row._id)
	                                    }
	                                }
                                }, '编辑'),
                                h('Button', {
	                                props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
	                                on: {
	                                    click: () => {
	                                        this.removeData(params.row._id);
	                                    }
	                                }
	                            }, '删除'),
	                             h('Button', {
	                                props: {
	                                    type: 'text',
	                                    size: 'small'
	                                },
	                                on: {
	                                    click: () => {
	                                    	this.review(params.row._id);
	                                        this.modal2=true
	                                    }
	                                }
	                            }, '评论'),
                            ]);
                        }
                    }                   
                ],
                formValidates: {
	                name: '',	             
	                date: '',
	                content:'',
	                newId:''
	            },	
                formValidate:{
		                title: '',
		                subhead:'',
		                content: '',
		                author:'',
		                date: '',
		                cateId:''
		            },
		            ruleValidates: {
		                name: [
		                    { required: true, message: '姓名不能为空', trigger: 'blur' }
		                ],
		                date: [
		                    { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
		                ],
		                content: [
		                    { required: true, message: '请输入个人评论', trigger: 'blur' },
		                    { type: 'string', min: 5, message: '介绍不能少于5字', trigger: 'blur' }
		                ]
		            },
		            ruleValidate: {
		                title: [
		                    { required: true, message: '标题不能为空', trigger: 'blur' }
		                ],
		                subhead: [
		                    { required: true, message: '副标题不能为空', trigger: 'blur' }
		                ],
		                content: [
		                    { required: true, message: '请输入个人内容', trigger: 'blur' },
		                    { type: 'string', min: 5, message: '内容不能少于5字', trigger: 'blur' }
		                ],
		                author: [
		                    { required: true, message: '作者不能为空', trigger: 'blur' }
		                ],
		                date: [
		                    { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
		                ],
		               
		            }                          
			}
			
		},
		methods:{
			addDatas(){
				this.modal1 = true
				this.data3.forEach((ids)=>{
        			var id = ids._id
					this.formValidate.cateId = id
        		})
			},
			review(id){
				this.formValidates.newId = id
				
			},
			handleSubmits(name){
				this.$refs[name].validate((valid) => {
	                    if (valid) {
	                    	this.$router.push({path:'/comment/'+this.formValidates.newId});
	                    	this.$http({
			        				method:'POST',
			        				url:'http://localhost:3000/comment/data/',
			        				data:this.formValidates
			        			}).then(res=>{
			        				
									
			            	})
	                    	
	                    	
	                        this.$Message.success('提交成功!');
	                    } else {
	                        this.$Message.error('表单验证失败!');
	                    }
	                })
			}
		}
    }
</script>

<style scoped="">
	.active{
		background:aqua
	}
</style>